<template>
  <div class="api-docs-container">
    <div class="docs-header">
      <h1>API 文档</h1>
      <p>AI Market 平台接口文档</p>
    </div>
    
    <div class="docs-content">
      <a-card title="接口说明" style="margin-bottom: 16px">
        <p>本文档提供了 AI Market 平台的所有 API 接口说明。</p>
        <p>基础URL: <code>http://localhost:8081/api</code></p>
        <p>所有接口都需要在请求头中携带 <code>satoken</code> 进行身份验证（除登录接口外）。</p>
      </a-card>
      
      <a-card title="用户认证接口" style="margin-bottom: 16px">
        <a-collapse>
          <a-collapse-panel key="login" header="POST /auth/login - 用户登录">
            <p><strong>请求参数：</strong></p>
            <pre>
{
  "username": "string",
  "password": "string"
}
            </pre>
            <p><strong>响应示例：</strong></p>
            <pre>
{
  "code": 200,
  "message": "登录成功",
  "data": {
    "token": "string",
    "userInfo": {
      "id": 1,
      "username": "admin",
      "email": "admin@example.com"
    }
  }
}
            </pre>
          </a-collapse-panel>
          
          <a-collapse-panel key="register" header="POST /auth/register - 用户注册">
            <p><strong>请求参数：</strong></p>
            <pre>
{
  "username": "string",
  "password": "string",
  "email": "string"
}
            </pre>
          </a-collapse-panel>
        </a-collapse>
      </a-card>
      
      <a-card title="应用管理接口">
        <a-collapse>
          <a-collapse-panel key="create-app" header="POST /app/create - 创建应用">
            <p><strong>请求参数：</strong></p>
            <pre>
{
  "name": "string",
  "description": "string",
  "category": "string",
  "icon": "string"
}
            </pre>
          </a-collapse-panel>
          
          <a-collapse-panel key="app-list" header="GET /app/list - 获取应用列表">
            <p><strong>查询参数：</strong></p>
            <ul>
              <li>name: 应用名称（可选）</li>
              <li>category: 应用分类（可选）</li>
              <li>page: 页码（默认1）</li>
              <li>size: 每页大小（默认10）</li>
            </ul>
          </a-collapse-panel>
          
          <a-collapse-panel key="my-apps" header="GET /app/my - 获取我的应用">
            <p><strong>查询参数：</strong></p>
            <ul>
              <li>page: 页码（默认1）</li>
              <li>size: 每页大小（默认10）</li>
            </ul>
          </a-collapse-panel>
        </a-collapse>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
// API文档页面，纯展示组件
</script>

<style scoped>
.api-docs-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.docs-header {
  text-align: center;
  margin-bottom: 32px;
}

.docs-header h1 {
  font-size: 32px;
  margin: 0 0 8px 0;
}

pre {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
}

code {
  background: #f5f5f5;
  padding: 2px 4px;
  border-radius: 2px;
  font-family: 'Courier New', monospace;
}
</style>